<template>
	<view class="uni-page-body" style="box-sizing: border-box;">


		<!-- 图片上传 -->
		<view class='upload-image-view'>

			<block v-for="(image,index) in imageList" :key="index">
				<view class='image-view'>
					<image :src="image" :data-src="image" @tap="previewImage"></image>
					<view class='del-btn' :data-index="index" @tap='deleteImage'>
						<view class='baicha'></view>
					</view>
				</view>
			</block>
			<view class='add-view' v-if="imageList.length < imageLength" @tap="chooseImage">
				<!-- 十字架 -->
				<view class="cross">
					<view class="transverse-line"></view>
					<view class="vertical-line"></view>
				</view>
			</view>

		</view>


		<view class="titleLabel"><input class="input" type="text" placeholder="填写标题会有更多赞呦~" name="title" v-model="title" /></view>
		<view class="passage"><textarea maxlength=1000 style="height: 400upx;width: 700upx; rows:1" type="text" placeholder="添加文章正文"
			 name="passage" v-model="passage"></textarea> </view>

		<!-- 新增标签 -->
		<view class="tags">
			<text class="addtag" style="font-size: 30upx;" @click="stys">添加标签</text>
			<view v-show="sty" class="newTagContent">
				<view class="newTagName">
					<input class="newTagInput" type="text" v-model="tagName" placeholder="输入新增标签" placeholder-style="font-size:14px;text-align:center;" />
				</view>
				<view class="newTagClick">
					<button class="newTagClickBtn" type="primary" size="default" @tap="createTags">添加</button>
				</view>
			</view>
			<!-- 已选择标签列表 -->
			<view class="tagItemSelectContent">
				<view class="tagItemSelect" :key="idx" v-for="(tagText,idx) in selectList">
					<view>
						<text :data-text="tagText">{{tagText}}</text>
					</view>
					<image class="select_delete" src="../../static/tab5/remove.png" :data-text="tagText" @tap="removeLabel"></image>
				</view>
			</view>
		</view>



		<button type="default" class="publish" @click="publish">提交</button>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				imageList: [], //保存图片路径集合
				imageLength: 6, //限制图片张数
				sty: false,
				tagName: '',
				selectList: [],
				intid: 1,
				title: '',
				passage: '',
				tag: '',
				// costs: '',
				upload: ''
			};
		},


		onLoad(event) {
			this.intid = JSON.parse(event.types);
			// console.log(JSON.parse(event.types));

		},
		methods: {
			//选择图片
			chooseImage: async function() {
				var that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						const  tempFilePaths= res.tempFilePaths[0];
						console.log(tempFilePaths)
						// that.imageList.push(tempFilePaths);
						uni.uploadFile({
							url: that.$serverUrl + '/app/oss/upload',
							files: [{
								uri: tempFilePaths
							}],
							fileType: 'image',
							header: {
								"Content-Type": "multipart/form-data",
								token: uni.getStorageSync('token'), //登录相关以外的接口需要
							},
							success: (uploadFileRes) => {
								
								var ret = JSON.parse(uploadFileRes.data)
								console.log(ret)
							 // var ret=uploadFileRes.data
								
								if(ret.code==500){
									uni.showToast({
										title:'上传失败'
									})
								}
								if(ret.code==0){
									that.imageList.push(ret.data);
									console.log(that.imageList)
								}
							}
						});
					}
				})
			},
			//预览图片
			previewImage: function(e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.imageList
				})
			},
			//删除图片
			deleteImage: function(e) {
				var index = e.target.dataset.index;
				var that = this;
				var images = that.imageList;
				images.splice(index, 1);
				that.imageList = images;
			},

			//新增标签
			stys: function() {
				this.sty = true;
			},
			createTags: function() {
				let newTag = this.tagName.trim();
				if (newTag == '') {
					return false;
				}
				let index = this.selectList.indexOf(newTag);
				this.tagName = '';
				if (newTag !== '' && index == -1) {
					// this.tagList.push(newTag);
					this.selectList.push(newTag);
				}
				this.sty = false;
			},
			//从已选择列表中移除
			removeLabel: function(e) {
				console.log(1)
				let select_value = e.target.dataset.text;
				let index = this.selectList.indexOf(select_value);
				if (index > -1) {
					this.selectList.splice(index, 1);
				}
			},


			// 提交发布信息按钮
			publish() {
				uni.request({
					// url: 'http://59.111.56.160:8088/app/hospital/brandMarketing/addBrandMarketing',
					url: this.$serverUrl + '/app/hospital/brandMarketing/addBrandMarketing', //仅为示例，并非真实接口地址。
					data: {
						url: this.imageList,
						title: this.title,
						content: this.passage,
						label: this.selectList,
						type: this.intid
					},
					method: 'POST',
					header: {
						token: uni.getStorageSync('token'), //登录相关以外的接口需要
						'content-type': 'application/json',
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						console.log(res.data);
						console.log(JSON.stringify(res));
						uni.showToast({
							title: res.data.msg,
							duration: 1000,
							position:center,
						});
						uni.switchTab({
							url:'./brand'
						})
					}
				});
			}










		}
	};
</script>

<style lang="scss" scoped>
	@import "../../common/upload-imgs.css";

	.body-view {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
	}

	.info-table {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		background-color: #FFFFFF;
	}

	.info-table .info-table-row {
		height: 120upx;
		width: 92%;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1upx solid rgba(204, 204, 204, 1);
	}

	.info-table .info-table-row .table-row-left {
		height: 40upx;
		font-size: 28upx;
		font-weight: 400;
		color: rgba(28, 28, 28, 1);
		line-height: 40upx;
	}

	.info-table .info-table-row .table-row-right {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.info-table .info-table-row .table-row-right image {
		width: 13upx;
		height: 24upx;
	}

	.info-table .info-table-row .table-row-right input {
		width: 560upx;
		height: 40upx;
		font-size: 28upx;
		font-weight: 400;
		color: rgba(28, 28, 28, 1);
		line-height: 40upx;
	}

	.table-btn-view {
		position: fixed;
		bottom: 27upx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.table-btn-view .save-btn {
		width: 92%;
		height: 90upx;
		background: rgba(0, 170, 255, 1);
		border-radius: 10upx;
		color: #FFFFFF;
	}

	.uploads {
		width: 92%;
	}


	.inputlist {
		display: flex;
		margin-top: 30upx;
		flex: 6;
	}

	.tag_input {
		// width: 50upx;
		flex: 1;
		border: 2upx solid #0178c6;
		border-radius: 30upx;
		padding: 5upx;
		width: 10% !important;
		margin: 0 30upx;
	}

	.add_input {
		position: relative;
		// margin:10upx;
		padding: 15upx 20upx;
		width: 30upx;
		height: 30upx;
		border: 2upx solid #D9D9D9;
		border-radius: 10upx;
	}

	.add_input:before,
	.add_input:after {
		content: " ";
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		background-color: #D9D9D9;
	}

	.add_input:before {
		width: 4upx;
		height: 30upx;
	}

	.add_input:after {
		width: 30upx;
		height: 4upx;
	}

	.add_input:active {
		border-color: #999999;
	}

	.add_input:active:before,
	.add_input:active:after {
		background-color: #999999;
	}

	.color-nav {
		flex-direction: column;
		box-sizing: border-box;
		width: 0px;
		padding: 5px 12px;
		justify-content: center;
		align-items: center;
		// writing-mode: tb-rl;
	}

	.titleLabel {
		margin: 30upx;
		font-size: 30upx;
		height: 120upx;
		border-bottom-style: solid;
		border-bottom-color: #f1f1f1;
		border-bottom-width: 2upx;
	}

	.passage {
		margin: 30upx;
		font-size: 20upx;
		height: 480upx;
		border-bottom-style: solid;
		border-bottom-color: #f1f1f1;
		border-bottom-width: 2upx;
		// width: 750upx;
		// word-wrap:break-word;

	}

	.tags {
		margin: 30upx;
		font-size: 25upx;
		height: 220upx;
	}

	.addtag {
		margin-top: 30upx;
		margin-bottom: 60upx;
	}




	.tagItemSelectContent {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		height: auto;
		width: auto;
		min-height: 30px;
		overflow-y: scroll;
		// border: 1px solid #F2F2F2;
		padding: 10upx 20upx 10upx 10upx;
		margin: 10upx;
	}

	.tagItemSelect {
		display: flex;
		align-items: center;
		padding: 0 20upx 0 20upx;
		position: relative;
		font-size: 18px;
		margin: 10upx;
		height: 40px;
		background-color: #007AFF;
		color: #FFFFFF;
		border-radius: 10px;
	}

	.select_delete {
		width: 15px;
		height: 15px;
		position: absolute;
		bottom: -6px;
		right: -7px;
	}

	.newTagContent {
		display: flex;
		justify-content: flex-start;
		margin: 20upx;
	}

	.newTagName {
		display: flex;
		align-items: center;
		width: 60%;
	}

	.newTagInput {
		border: 1px solid #999999;
		font-size: 16px;
		width: 100%;
		height: 32px;
	}

	.newTagClick {
		display: flex;
		align-items: center;
		margin-left: 10upx;
	}

	.newTagClickBtn {
		height: 35px;
		line-height: 35px;
	}

	.tagContainer {
		margin: 10upx;
		font-size: 18px;
		display: flex;
		flex-wrap: wrap;
		border: 1px solid #F2F2F2;
		position: relative;
	}

	.tagItem {
		padding: 0px 10px 0px 10px;
		margin: 10upx;
		display: flex;
		align-items: center;
		height: 40px;
		background-color: #FF9900;
		color: #FFFFFF;
		border-radius: 5px;
	}

	.tag_delete {
		width: 13px;
		height: 13px;
		margin-left: 10upx;
	}

	.cancelDel {
		position: absolute;
		bottom: 0;
		right: 5px;
	}

	.publish {
		border-radius: 100upx;
		background-color: #0178c6;
		color: white;
		// position: absolute;
		// bottom: 0upx;
		width: 100%;
	}
</style>
